import React, { Component } from 'react'
import { DeviceEventEmitter, TouchableOpacity, Text, Image, View} from 'react-native'
import { connect } from 'react-redux'

import Button from '../Components/Button'
import TextInput from '../Components/TextInput'
import AppConfig from '../Config/AppConfig'
const domain = AppConfig.domain
//import Push from '../Lib/Push'

import LoginActions from '../Redux/LoginRedux'

// Styles
import * as Animatable from 'react-native-animatable'
import styles from './Styles/LoginScreenStyle'

class LoginScreen extends Component {
  static navigationOptions = {
    header: null,
  }
  constructor(props) {
    super(props)
    this.state = {
      deviceId: null,
      mobile: null,
      mobileValid: false,
      password: null,
      passwordValid: false,
    }
  }
  //componentDidMount() {
  //  /** aliyun push service **/
  //  Push.getDeviceId((error, result) => {
  //    if (error) {
  //      console.error(error)
  //    } else {
  //      this.setState({deviceId: result})
  //    }
  //  })
  //}
  setMobile = (mobile) => {
    let valid = false
    if (mobile.length == 11) {
      valid = true
    }
    this.setState({
      mobile: mobile,
      mobileValid: valid
    })
  }
  setPassword = (password) => {
    let valid = false
    if (password.length >= 3) {
      valid = true
    }
    this.setState({
      password: password,
      passwordValid: valid
    })
  }
  login = () => {
    this.props.doLogin(this.state.mobile, this.state.password, this.state.deviceId)
  }
  componentDidUpdate(prevProps, prevState) {
    if (prevProps.login.fetching && !this.props.login.error) {
      DeviceEventEmitter.emit('login')
    }
  }
  render () {
    const { navigate, goBack } = this.props.navigation
    return (
      <View style={styles.container}>
        <Image
          source={require('../Images/login_bg.jpg')}
          style={styles.backgroundImage} />
        <View style={styles.form}>
          <Animatable.Text
            animation='fadeInDown'
            style={styles.title}>健康到位</Animatable.Text>
          <View style={styles.inputGroup}>
            <TextInput
              style={styles.input}
              keyboardType='phone-pad'
              placeholder='手机号码'
              placeholderTextColor='white'
              underlineColorAndroid='white'
              returnKeyType='next'
              onChangeText={this.setMobile} />
          </View>
          <View style={styles.inputGroup}>
            <TextInput
              style={styles.input}
              secureTextEntry={true}
              placeholder='密码'
              placeholderTextColor='white'
              underlineColorAndroid='white'
              returnKeyType='send'
              onChangeText={this.setPassword} />
          </View>
          {this.props.login.error &&
            <Text style={styles.errorText}>用户名或密码错误</Text>}
          <View style={{marginTop:10,marginHorizontal:10}}>
            {this.props.login.fetching ? (
              <Button onPress={()=>{}} title='登录中...' />
            ) : (
              <Button
                title='登录'
                disabled={!this.state.mobileValid || !this.state.passwordValid}
                onPress={this.login}  />
            )}
          </View>
          <View style={{flexDirection:'row',justifyContent:'space-between'}}>
            <TouchableOpacity
              activeOpacity={0.8}
              onPress={()=>navigate('WebScreen',{title:'忘记密码',link:domain+'/api/login/resetting'})}
              style={{padding:10}}>
              <Text style={styles.register}>忘记密码?</Text>
            </TouchableOpacity>
            <TouchableOpacity
              activeOpacity={0.8}
              onPress={()=>navigate('RegisterScreen')}
              style={{padding:10}}>
              <Text style={styles.register}>没有账号？点击注册</Text>
            </TouchableOpacity>
          </View>
        </View>
      </View>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    login: state.login
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    doLogin: (mobile, password, deviceId) =>
      dispatch(LoginActions.loginRequest(mobile, password, deviceId))
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(LoginScreen)
